import { useState, useMemo, useRef, useImperativeHandle, forwardRef, useEffect } from 'react';
import { Tabs, message } from 'antd';
import { stringify } from 'qs';
import { useApp } from '@inbiz/utils';
import { getMessage } from '@inbiz/react';
import QueryBar from './components/QueryBar';
import QueryTable from './components/QueryTable';
import ActionBar from './components/ActionBar';
import AddOrEditLangModal from './components/AddOrEditLangModal';
import { getComponents, getFormComponents } from './service';
import { getQueryParams } from './utils';
import './style.less';

const { TabPane } = Tabs;

const Right = forwardRef((props: any, ref) => {
    const { allLangs, currentSite, siteInfo, isForm, selectedRow } = props;
    const [currentType, setCurrentType] = useState('0');
    const [langVisible, setLangVisible] = useState(false);
    const [editData, setEditData] = useState(null);
    const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
    const [components, setComponents] = useState<any[]>([]);
    const appInfo: any = useApp();

    const isApp = useMemo(() => {
        return selectedRow?.OutId == appInfo?.OutId;
    }, [selectedRow, appInfo]);

    const queryBarRef = useRef<any>(null);
    const queryTableRef = useRef<any>(null);

    const addLang = () => {
        setLangVisible(true);
    };

    const editLang = (langItem: any) => {
        setLangVisible(true);
        setEditData(langItem);
    };

    const langTypes = useMemo(() => {
        return [
            {
                key: '0',
                label: '业务多语言',
            },
            {
                key: '1',
                label: '组件多语言',
            },
        ];
    }, []);

    const onQueryLanguageType = (activeKey: string, needEmpty?: boolean) => {
        if (needEmpty !== false) {
            queryTableRef?.current?.setData([]);
            queryTableRef?.current?.setTotal(0);
        };
        setSelectedRowKeys([]);
        setCurrentType(activeKey);
        queryTableRef?.current?.getLangData(getQueryParams(isForm, activeKey, isApp, selectedRow, siteInfo));
        queryBarRef?.current?.queryForm?.setFieldValue('componentLanguageType', 0);
    };

    useEffect(() => {
        if (currentType == '0') {
            return;
        };
        if (isForm) {
            const params = isApp ? {
                maxResultCount: 1000,
                skipCount: 0,
                dataVersionId: selectedRow?.DataVersionId || '',
            } : {
                maxResultCount: 1000,
                skipCount: 0,
                pageOutId: isApp ? '' : selectedRow?.OutId,
                dataVersionId: selectedRow?.DataVersionId || '',
            }
            getFormComponents(params).then((res) => {
                const formatRes = res?.Items?.map((item: any) => {
                    const component = item.Code;
                    const key = `${component}.title`;
                    const name = getMessage(key) == key ? component : getMessage(key);
                    return {
                        key: component,
                        name: name,
                    };
                });
                setComponents(formatRes);
            })
        } else {
            getComponents({
                appId: appInfo?.appId,
                siteOutId: appInfo?.SiteInfo?.OutId,
                dataVersionId: appInfo?.SiteInfo?.DataVersionId,
                pageOutId: isApp ? '' : selectedRow?.OutId,
            }).then((res) => {
                const formatRes = res?.map((item: string) => {
                    const component = item.split('.')?.[0]
                    const key = `${component}.title`;
                    const name = getMessage(key) == key ? component : getMessage(key);
                    return {
                        key: item,
                        name: name,
                    };
                });
                setComponents(formatRes);
            })
        };
    }, [appInfo, isApp, currentType, selectedRow, isForm]);

    useImperativeHandle(ref, () => {
        return {
            ...queryBarRef?.current,
            ...queryTableRef?.current,
            setCurrentType,
            currentType,
            setSelectedRowKeys,
        };
    });

    return (
        <div className='inbiz-lang-manage-right'>
            <Tabs
                activeKey={currentType}
                onChange={onQueryLanguageType}
            >
                {
                    langTypes?.map((item) => {
                        return (
                            <TabPane key={item?.key} tab={item?.label} />
                        )
                    })
                }
            </Tabs>
            {
                (isApp && currentType == '0')
                &&
                <ActionBar
                    isForm={isForm}
                    addLang={addLang}
                    queryTableRef={queryTableRef}
                    selectedRowKeys={selectedRowKeys}
                    setSelectedRowKeys={setSelectedRowKeys}
                />
            }
            <QueryBar
                ref={queryBarRef}
                allLangs={allLangs}
                queryTableRef={queryTableRef}
                currentType={currentType}
                components={components}
                onQueryLanguageType={onQueryLanguageType}
                isApp={isApp}
                isForm={isForm}
                siteInfo={siteInfo}
                selectedRow={selectedRow}
            />
            <QueryTable
                ref={queryTableRef}
                isForm={isForm}
                queryBarRef={queryBarRef}
                siteOutId={siteInfo?.OutId || ''}
                isApp={isApp}
                pageOutId={isApp ? '' : selectedRow?.OutId}
                dataVersionId={selectedRow?.DataVersionId || appInfo?.DataVersionId}
                queryLanguageType={currentType}
                siteType={currentSite}
                editLang={editLang}
                components={components}
                allLangs={allLangs}
                selectedRowKeys={selectedRowKeys}
                setSelectedRowKeys={setSelectedRowKeys}
            />
            {
                langVisible
                &&
                <AddOrEditLangModal
                    isForm={isForm}
                    visible={langVisible}
                    setVisible={setLangVisible}
                    setEditData={setEditData}
                    allLangs={allLangs}
                    editData={editData}
                    queryTableRef={queryTableRef}
                    queryBarRef={queryBarRef}
                    selectedRow={selectedRow}
                />
            }
        </div>
    )
});

export default Right;